<template>
    <el-form :model="form" label-width="120px">
      <el-form-item label="租赁状态">
        <el-select v-model="form.status">
          <el-option label="已租赁" value="OCCUPIED" />
          <el-option label="空闲" value="VACANT" />
        </el-select>
      </el-form-item>
  
      <el-form-item label="租赁期限">
        <el-date-picker
          v-model="form.dates"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
  
      <el-form-item label="租金金额">
        <el-input-number 
          v-model="form.rent" 
          :min="0" 
          :precision="2" 
          controls-position="right"
        />
      </el-form-item>
  
      <el-form-item>
        <el-button type="primary" @click="submit">保存修改</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup lang="ts">
  import { reactive } from 'vue'
  
  const props = defineProps<{
    initialData: Space
  }>()
  
  const emit = defineEmits(['submit'])
  
  const form = reactive({
    status: props.initialData.status,
    dates: [new Date(props.initialData.startDate), new Date(props.initialData.endDate)],
    rent: props.initialData.rentAmount
  })
  
  const submit = () => {
    emit('submit', {
      ...form,
      startDate: form.dates[0].toISOString(),
      endDate: form.dates[1].toISOString()
    })
  }
  </script>